import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {

  state = {
    mouse:false
  }
  // 鼠标移入,移出的回调
  handleMouse = (flag) => {
    return () => {
      this.setState({mouse:flag})
    }
    
  }
// 处理复选框事件的回调
  handleCheck = (id) => {
    return (e) => {
      this.props.upDateToDo(id,e.target.checked)
      
    }
    
  }

  // 处理删除todo的回调
  handleClick = (id) => {
    
    return () => {
      if(window.confirm('确定删除吗')) this.props.deleteToDo(id)
      
    }
  }
  render () {
    const {id,name,done} = this.props
    return (
		<li onMouseEnter={this.handleMouse(true)}  onMouseLeave={this.handleMouse(false)}>
			<label>
          <input type="checkbox" checked={done} onChange={ this.handleCheck(id)}/>
				<span>{name}</span>
			</label>
        <button className="btn btn-danger" style={{ display: this.state.mouse === true ? 'block' : 'none' }} onClick={this.handleClick(id)}>
				删除
			</button>
      </li>
      
	)
  }
}